import React, { Component } from 'react';
import { Form, Icon, Input, Button ,message } from "antd"
import { ReqLogin } from "../../api"
import storageUtils from "../../utils/storageUtils"


import "./login.less"

message.config({
    top: 100,
    duration: 2,
  });

class login extends Component {
    handleSubmit = e => {
        this.props.form.validateFields(async (err, values) => {
            const { status, data, info } = await ReqLogin(values)
            if (!status) {
                message.success(info);
                storageUtils.saveUser(data);
                this.props.history.push("/admin");
            } else {
                message.error(info);
            }
        });
    };
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="formbox">
                <h2>React后台管理系统</h2>
                <Form className="login-form">
                    <Form.Item>
                        {getFieldDecorator('userName', {
                            rules: [
                                { required: true, message: '用户名不能为空！' }
                            ],
                        })(
                            <Input
                                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                placeholder="请输入用户名"
                            />
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('passWord', {
                            rules: [
                                { min: 5, message: "最小长度为5" },
                                { max: 12, message: "最大长度为12" },
                                { required: true, message: '密码不能为空！' }
                            ],
                        })(
                            <Input
                                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                type="password"
                                placeholder="请输入秘密"
                            />
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button
                            block
                            type="primary"
                            htmlType="submit"
                            onClick={this.handleSubmit}
                            className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }
}
const WrappedNormalLoginForm = Form.create()(login);
export default WrappedNormalLoginForm;